<!-- 
v-bind: 动态绑定指令，用于给标签或组件绑定一个动态的值。
语法：v-bind:属性名="值表达式"
简写：v-bind: 可以 简写为 :
值表达式：JS 表达式，包括变量、计算式、三元表达式、函数调用等。

注意：
1、当值为一个字符串时，不需要使用动态绑定。
2、当值为一个布尔值（true / false）、数值（如1, 3.5）时，
需要使用 v-bind 来进行传值绑定。以便组件能够正确地识别所
传递值的数据类型，不至于把它们都当做字符。
-->
<template>
    <!-- <div class="todo-item" :class="{completed: !!completed}"> -->
      <div class="todo-item" :class="[steteClass]">
        <li>
          <label>
            <input type="checkbox" v-bind:checked="completed"/>
            <span>{{ content }}</span>
          </label>
          <button class="btn btn-danger" style="display:none">删除</button>
        </li>
    </div>
</template>

<script setup>
import {reactive, toRefs, computed} from 'vue';

// 声明所能够接收外部传信息应该使用属性名及类型
// 定义组件属性
// 方式一：使用 defineProps([属性名1, 属性名2, ...])
// const {completed, content} = defineProps(['completed', 'content']);

/*
 方式二：
 defineProps({
   属性名1: {
      type: String | Number | Object | Any,
      default: 默认值
   },

   ...
 })
 */
// const {completed, content} = defineProps({
//   completed: {
//     type: Boolean,
//     default: false
//   },
//   // content: {
//   //   type: String
//   // }
//   content: String
// });

// 用一个对象作为接收的属性值
const { itemData } = defineProps({itemData: Object});
const {completed, content} = toRefs(itemData);

// 假定：完成用类名 completed，未完成用 uncompleted
const steteClass = computed(() => {
  if(completed.value){
    return 'completed';
  }else{
    return 'uncompleted';
  }
});
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

.todo-item.completed span {
  color: #DDD;
  text-decoration: line-through;
}

.todo-item.uncompleted span {
  color: darkred;
}
</style>